<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/styletable.css" type="text/css"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/stylepage.css" type="text/css"/>
    <script src="/layui/layui.all.js" charset="utf-8"></script>
    <script src="/js/jquery.2.1.4.js" charset="utf-8"></script>
    <script src="/js/vue.min.js"></script>
</head>
<body>
<script>
    window.onload = function () {
        var old = ${old};
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    model: {
                        total:${total},//总条数
                        size:${size},//每页显示条目个数不传默认10
                        page:${page}
                    }
                }
            },
            methods: {
                //页码切换执行方法
                pageFn(val) {
                    if (old == val) {
                        return;
                    }
                    old = val;
                    window.location.href = "/res/list/" + val+"/"+old;
                }
            }
        });
    }

    function stop() {
        if ($(".check:checked").size() == 0) {
            layer.alert('请至少选一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#resform").attr("action", "/res/stop").submit();
        }
    }

    function start() {
        if ($(".check:checked").size() == 0) {
            layer.alert('请至少选一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#resform").attr("action", "/res/start").submit();
        }
    }

    function edit() {
        if ($(".check:checked").size() != 1) {
            layer.alert('请选择一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#resform").attr("action", "/res/toedit").submit();
        }
    }

    function dele() {
        if ($(".check:checked").size() == 0) {
            layer.alert('请至少选一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#resform").attr("action", "/res/del").submit();
        }
    }
</script>
<div style="margin: 10px 15px 0px 15px">
    <div style="margin-top: 1px;margin-left: 1px;margin-bottom: 10px">
        <button class="layui-btn" onclick="start();">启用</button>
        <button class="layui-btn layui-btn-danger" onclick="stop();">禁用</button>
        <a class="layui-btn layui-btn-normal" href="/res/toadd">添加</a>
        <button class="layui-btn layui-btn-edit" onclick="edit();">编辑</button>
        <button class="layui-btn layui-btn-warm" onclick="dele();">删除</button>
    </div>
    <form id="resform">
        <table style="width: 100%">
            <tr>
                <th width="5%"></th>
                <th width="30%">资源名称</th>
                <th width="20%">资源路径</th>
                <th width="15%">资源类型</th>
                <th width="15%">排序号</th>
                <th width="15%">是否启用</th>
            </tr>
            <c:forEach items="${reses}" var="res">
                <tr>
                    <td align="center"><input class="check" name="checks" value="${res.rid}" type="checkbox"/></td>
                    <td>${res.rname}</td>
                    <td>${res.rpath}</td>
                    <td align="center">
                    <span class="layui-btn layui-btn-mini"
                          <c:if test="${res.rtype=='菜单'}">style="background-color: #00ac00"</c:if>
                          <c:if test="${res.rtype=='功能'}">style="background-color: #54549e"</c:if>>
                            ${res.rtype}</span></td>
                    <td>${res.rorder}</td>
                    <td align="center"><span
                            class="layui-btn layui-btn-mini <c:if test="${res.rstate=='禁用'}">layui-btn-danger</c:if>">${res.rstate}</span>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </form>
    <div id="app" style="margin-top: 25px">
        <pageination :total="model.total" :size="model.size" :page="model.page" :changge="pageFn"></pageination>
    </div>
    <script src="/js/pageination.js"></script>
</div>
</body>
</html>
